import React, { Component } from 'react'
import '../assets/style/homePage.less'
import Img from '../components/Img'
import axios from 'axios'
import { Link } from 'react-router-dom'





export default class homePage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: [],
        }
    }
    componentDidMount() {

        this.list()
    }
    list = async () => {
        const url = 'https://www.fastmock.site/mock/ff4678a947ff93701a044d3c33cf02ee/home/getNew/house'
        const res = await axios({
            method: 'post',
            url: url
        });
        this.setState({
            arr: res.data.data
        })
        console.log(this.state.arr);
    }
    render() {
        return (

            <div className="homebox">
                <div className="top">宏烨找房</div>

                <div className="nav">
                    <Link to='/home/newhouse'>
                        <div className="chunk">
                            <Img src="homePage/1.png"></Img>
                            <div className="title"> 新房</div>
                        </div>
                    </Link>
                    <Link to='/home/lease'>
                        <div className="chunk">
                            <Img src="homePage/3.png"></Img>
                            <div className="title">出租房</div>
                        </div>
                    </Link>
                    <Link to='/home/resoldhouse'>
                        <div className="chunk">
                            <Img src="homePage/2.png"></Img>
                            <div className="title">二手房</div>
                        </div>
                    </Link>
                    <Link to="/home/calculator">
                        <div className="chunk">
                            <Img src="homePage/4.png"></Img>
                            {/* <Link to='/Calculator'></Link> */}
                            <div className="title">房贷计算器</div>
                        </div>
                    </Link>
                </div>

                <div className="recommend">
                    <div className="news">新房</div>

                    {
                        this.state.arr.map((item, keys) => {
                            return <div className="every" key={keys}>
                                <div className="left">
                                    <Img src="homePage/5.png"></Img>
                                </div>
                                <div className="right">
                                    <div className="name">
                                        <div>{item.title}</div>
                                        <div className="status">{item.status}</div>
                                    </div>
                                    <div className="address">
                                        <div>{item.address}</div>
                                    </div>
                                    <div className="place">
                                        <div>{item.area}</div>
                                        <div className="price">{item.price}</div>
                                    </div>
                                    <ul>
                                        <li>{item.tag}</li>
                                    </ul>

                                </div>
                            </div>

                        })
                    }

                </div>
            </div>



        )
    }
}
